// Place all the styles related to the Moments controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

/* Comments */

.comment {
	margin-top: 40px;
	padding: 20px;
	background-color: $background-color;
	border: 2px solid $secondary-text-color;

	div.table {
		display: table;
		table-layout: auto;
		width: 100%;
		border-collapse: separate;

		@media screen and (max-width: $medium) {
			.padding_right {
				padding-right: 10px !important;
			}
		}

		@media screen and (max-width: $small) {
			.vertical_align_middle {
				vertical-align: top !important;
			}
		}
	}

	div.table div.table_row {
		display: table-row;
	}

	div.table div.table_cell {
		display: table-cell;
		word-break: break-word;
	}

	.align_left {
		float: left;
		display: inline-block;
	}

	.align_right {
		float: right;
		display: inline-block;
	}

	.delete_comment {
		padding-left: 20px;
		text-align: right;
	}

	@media screen and (max-width: $medium) {
		margin-top: 20px;
		padding: 10px;

		.delete_comment {
			padding-left: 10px;
		}
	}

	@media screen and (max-width: $small) {
		.delete_comment {
			padding-left: 5px;
		}
	}
}

.comment_info {
	color: $secondary-text-color;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	border-bottom: 1px solid $subtle-secondary-text-color;

	@media screen and (max-width: $small) {
		font-size: $font16;
	}
}

.comment a:link,
.comment a:visited,
.comment a:hover {
	color: $secondary-text-color;
	border-color: $secondary-text-color;
}

.delete_comment a:link,
.delete_comment a:visited,
.delete_comment a:hover {
	color: $secondary-text-color;
	border: none;
}

.comment_text {
	word-wrap: break-word;
	padding: 10px;
	font-weight: 300;
}

.comment_textarea {
	width: 100%;
	margin: 0px !important;
}

@media screen and (max-width: $medium) {
	#comment_visibility {
		margin-bottom: 10px;
	}
}
